iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
0
自我挑戰組

網頁學習日誌系列 第 4

CSS : 網頁排版要注意的Box Model(盒模型)

  • 分享至 

  • xImage
  •  

「開發人員工具」檢測網頁是網頁排版的重要流程,工具右方裡面有個Box Model,主要是看排版範圍數據,如下圖:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321MzAAotKwH1.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321uXCCQsdojo.png

上面的粉紅色區塊,裡面設定寬高都是300px。

    .box{
        width: 300px;
        height: 300px;
        background: pink;
    }

如果裡面放一張寬高都是290px的圖片

https://ithelp.ithome.com.tw/upload/images/20200411/20107321AEs3c2afaw.png

上圖想要讓內距變寬,就增加box的padding:10px;

    .box{
        width: 300px;
        height: 300px;
        background: pink;
        padding:10px;//上下左右都加10px
    }

https://ithelp.ithome.com.tw/upload/images/20200411/201073213gKz6fvE97.png

發現粉紅色區塊寬高度都變成320px

https://ithelp.ithome.com.tw/upload/images/20200411/20107321LDPjB9fJHH.png

原因在下圖的box就可看出,padding四邊都加10所以

寬度= 300px+10px(左)+10px(右)=320px
高度= 300px+10px(上)+10px(下)=320px

https://ithelp.ithome.com.tw/upload/images/20200411/20107321jSuEWJfGiY.png

同樣如果加上外框線border也是

寬度= 300px+2px(左)+2px(右)=304px
高度= 300px+2px(上)+2px(下)=304px

    .box{
        width: 300px;
        height: 300px;
        background: pink;
        border:2px solid black;
    }

https://ithelp.ithome.com.tw/upload/images/20200411/20107321eROYemLZMt.png

如果是外距(margin)則不會影響寬高,只會影響位置

    .box{
        width: 300px;
        height: 300px;
        background: pink;
        margin:10px;
    }

https://ithelp.ithome.com.tw/upload/images/20200411/20107321PM8HXgzy8H.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321hAoHXlSXHu.png

結論:
padding、border:影響元素寬高
margin:影響元素位置


上一篇
CSS : display屬性-區塊和行內元素差異
下一篇
Git : 基礎操作-新增檔案和資料夾
系列文
網頁學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言